<!-- letterAdvce -->
<template>
  <div class="pageletterAdvce">
    <!-- 导航栏 -->
    <div class="navBar">
      <customNavBar :leftTetx="leftTetx" :titleTest="titleTest" :H5="true" @goBack="goBack"></customNavBar>
    </div>
    <div class="content">
      <div class="letterAdviceText" v-if="status == 0"></div>
      <div class="letterAdviceTipsText" v-if="status == 1"></div>
      <div class="english" v-if="status == 0"></div>
      <div class="tipsenglish" v-if="status == 1"></div>
      <div class="containder">
        <div class="envelope"></div>
        <div class="textViewExperience">
          <div :class="status == 0 ? 'sect' : 'sectTips'">
            <div v-for="(v, b) in context" :key="b" class="textOneExperience">
              {{ v }}
            </div>
          </div>
          <div class="experienceButExperienceSpan" v-if="status == 1">链接有效期剩余时间:{{ numData || '' }}天</div>
          <!-- 手机号 -->
          <div class="photo" v-if="status == 1">
            <div class="photoDv">
              <div>手机号</div>
              <input type="text" v-model="formList.mobile1" placeholder="请输入手机号码" v-if="mobileNoShow">
              <input type="text" v-model="formList.mobile" placeholder="请输入手机号码" v-else disabled>
            </div>
            <div class="photoDv1">
              <div class="photoDvCode">
                <div>验证码</div>
                <input type="text" v-model="formList.smsCode" placeholder="请输入">
              </div>
              <div @click="sendCode">{{ codeTextflag }}</div>
            </div>
          </div>
        </div>
        <div class="triangle">
          <div class="small-div experienceButExperienOut" v-if="status == 0" v-log-button-name="'保单检视_邀请信_暂不体验'" @click.stop="goreportingJst()">
           <div class=" experienceButExperiencez">
            暂不体验
           </div>
          </div>
          <div class="small-div experienceButExperience" @click="goreportingResultscz()" v-if="status == 0"
            v-log-button-name="'保单检视_邀请信_立即体验'">立即体验</div>
          <div class="small-div experienceButExperiencee" @click="goreportingResultscz()" v-if="status == 1">立即开启</div>
        </div>
      </div>
      <div class="stage"></div>
    </div>
  </div>
  <div class='pageBj' v-if="showDialog">
    <div class="pageBjDiv">
      <div class='pageBjDivHeader'>温馨提示</div>
      <div class='pageBjDivsection'>您确认要退出本次服务吗?</div>
      <div class="pageBjDivBtoom">
        <div @click="onConfirm()">继续退出</div>
        <div @click="onCancel()">取消</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="addCustomers">
import { useRouter, useRoute } from "vue-router";
import { Toast } from "/@/utils/Message";
import { onMounted } from "vue";
import { reactive, ref } from "vue";
// import { JIAMIPublicData, JIMIPublicData } from '/@/utils/encrypt_sm2';
import { getUrlParam, notificationLetteradssa, validatorCustomMark } from "/@/api/auth/addCustome";
import { isTaskStatusGoView, getUrlExpire } from "/@/api/auth/task";
import { createCustomMark } from '/@/api/auth/repot'
import customNavBar from "/src/components/NavBar/customNavBar.vue";
import { sm2 } from 'sm-crypto';
import { policyListStore } from '/@/stores/policyListStore'
import { RInform } from '/@/api/reviewH5/index'
import { Dialog } from '/@/utils/Message'
import { userSubmit, subCode } from '/@/api/index'



//公钥串---加密使用
const publicKey = ref<string>("044291b381a039a8d7d02d7272d2d7c78a30d33e3eeaa0b509bf77d2376582ab2d573730e6bfe9a53bad53f53ac1a85d9c11050931f04bc8b3afc04144d5a6f9be")
//私钥串---解密使用
const privateKey = ref<string>("5aa03412c3051e1d4cf9d19cfbeeec70c28f388c9f82747cc912096c9cd44bea")
// 加密方法
const JIAMIPublicData = (data: any): string => {
  const cipherMode = 1;
  const result = sm2.doEncrypt(data, publicKey.value, cipherMode);
  return `04${result}`;
}
// 解密方法
const JIMIPublicData = (data: any): string => {
  const cipherMode = 1;
  //data为加密的数据
  const result = sm2.doDecrypt(data.substring(2), privateKey.value, cipherMode)
  return result;
}

const router = useRouter();
const route = useRoute();
const pStore = policyListStore()
const t = ref<string>('')
const errCode = ref<any>('')
let context = ref<string[]>([]);
const reportCode = ref('')
const showDialog = ref<boolean>(false)
let data = reactive({
  ...route.query,
});
// data.taskCode = '000002202312180939478946'
const leftTetx = ref<string>("");
const titleTest = ref<string>("");
var status: string | number = '3'
let jstUrl = ''
const num = ref('0')
const taskCode = ref<any>("");
const goreportingResultscz = (): void => {
  console.log(status,'status')
  if (status == '0') {
    // 告知信
    callbackSuccess()
    router.push({ path: '/authorization', query: { statusBar: 'true', navigator: 'true', taskNo: JIMIPublicData((data.taskCode as string)) } })
    // window.location.href = `${jstUrl}?statusBar=true&navigator=true&taskNo=${data.taskCode}`
  } else {
    if (data.taskCode) {
      // 温馨提示
      onSubmit()
      // validatorCustomMark({ taskCode: data.taskCode }).then((res: any) => {
      //   if (res.code == 200) {
      //     if (res.status == '0') {
      //       // 等于O的时候 taskCode就是customToken
      //       sessionStorage.setItem('customToken', res.taskCode)
      //       //  router.push({ path: 'detailedVersion', query: { taskCode: data.taskCode, isYsc: "1", jstUrl: jstUrl } })
      //       if (num.value == '6' || num.value == '15') {
      //         router.push({ path: 'reportingResultxysc', query: { taskCode: data.taskCode, isYsc: "1" } })
      //       } else if (num.value == '18') {
      //         router.push({ path: 'reportingResultybc', query: { taskCode: data.taskCode, isYsc: "1" } })
      //       }
      //     }
      //   } else if (res.code == 402) {
      //     //  window.location.href = `${jstUrl}?statusBar=true&navigator=true&taskNo=${data.taskCode}`
      //     router.push({ path: '/authorization', query: { statusBar: 'true', navigator: 'true', taskNo: JIMIPublicData((data.taskCode as string)), letter: num.value } })
      //   }
      // })
    }
  }
}
const goBack = () => {
  goreportingJst()
}
const onConfirm = () => {
  // window.location.replace('./reportingResultwxts')
  router.push({ path: 'reportingResultwxts' })
}
const onCancel = () => {
  // 取消操作
  showDialog.value = false;
}
const goreportingJst = (): void => {
  showDialog.value = true
}
// 解密报文
const getHtml = (t: any) => {
  // t = "尊敬的先生/女士，您好！|您的保单检视报告已生成。报告内容较多，您可联系保险机构或服务人员为您解读报告。|报告生成时间:2024-07-16 14:17:35|太平洋保险有限公司保险公司|服务人员:*业人| "
  //   t = "尊敬的44b2d43eb5aa0441ac8dba86f8753515，大哥好！|太平洋保险保险公司代理人管理员邀请您使用保检视服务(以下简称本服务)本服务是指运用保险行业数据，对您的保险保障情况进行整合分析，整理并形成涵盖保单总览、保障透视、费用筹划、客户权益等内容的保单检视报告。| 本服务由中国银行保险信息技术管理有限公司(简称中国银保信)提供。中国银保信主要负责建设和运营全国统一的银行业、保险业信息共享系统，提供交易支持、数据治理、风险管理、科技支撑和登记、验证精算、咨询等服务。|";
  let array = (t as string).split("|");
  context.value = array.slice(0, -1);
};
// 发送验证码
const formList = reactive({
  mobile: '',
  mobile1: '',
  smsCode: ''
})
const codeTextflag = ref('获取验证码')
const isSendCode = ref(false)
let timer: any = ''
const sendCode = () => {
  if (codeTextflag.value.indexOf('验证码') <= 0) return
  let newobj: any = ''
  if (!mobileNoShow) {
    newobj = { mobile: formList.mobile as string }
  }
  if (mobileNoShow) {
    newobj = { mobile: formList.mobile1 as string }
  }
  let params: any = JSON.stringify(newobj)
  userSubmit(params).then((res: any) => {
    // sendSms(store.transactionId as any).then((res:any) => {
    if (res.code == 200) {
      if (res.data.result) {
        Toast('验证码已发出')
        isSendCode.value = true
        let n = 60
        timer = setInterval(() => {
          codeTextflag.value = `${n}s`
          n--
          if (n < 0) {
            clearInterval(timer)
            codeTextflag.value = '获取验证码'
          }
        }, 1000)
      } else {
        Toast('获取验证码错误,请重新获取')
      }
    } else {
      codeTextflag.value = '获取验证码'
      Dialog({
        message: res.msg || '操作错误', // '您的手机号已被占用注册，请更换手机号。'
      })
    }
  })
}
// 效验验证码
const onSubmit = () => {
  if (!formList.smsCode) {
    Toast('请获取验证码')
    return
  }
  // let newobj = {
  //   credential: formList.smsCode as any,
  //   mobile: formList.mobile as string,
  // }
  let newobj: any = ''
  if (!mobileNoShow.value) {
    newobj = {
      credential: formList.smsCode as any,
      mobile: formList.mobile1 as string,
      taskCode: taskCode.value
    }
  }
  if (mobileNoShow.value) {
    newobj = {
      credential: formList.smsCode as any,
      mobile: formList.mobile as string,
      taskCode: taskCode.value
    }
  }
  let params: any = JSON.stringify(newobj)
  subCode(params).then((res: any) => {
    if (res.code == 200) {
      if (res.data.result) {
        callbackSuccess(0)
      } else {
        Toast('验证码错误,请输入正确的验证码')
      }
    } else {
      Toast('操作错误')
    }
  })
}
//创建唯一标识
const callbackSuccess = async (dataObject?:any) => {
  const a:any = await createCustomMark({ taskCode: data.taskCode, createFlag: dataObject})
  if (a.code == 200) {
    sessionStorage.removeItem('customToken')
    sessionStorage.setItem('customToken', a.customToken)
    if (num.value == '6' || num.value == '15') {
      router.push({ path: 'reportingResultxysc', query: { taskCode: data.taskCode, isYsc: "1" } })
    } else if (num.value == '18') {
      router.push({ path: 'reportingResultybc', query: { taskCode: data.taskCode, isYsc: "1" } })
    } else if (num.value == '10') {
      // router.push({ path: '/reportingResultswyx', query: { taskCode: data.taskCode, reportCode: reportCode.value } })
    } else if (num.value == '14') {
      router.push({ path: '/reportingResultsbyz', query: { taskCode: data.taskCode, reportCode: reportCode.value, errCode: errCode.value  } })
    } else if (num.value == '16') {
      // router.push({ path: '/reportingResultcsb', query: { taskCode: data.taskCode, reportCode: reportCode.value, errCode: errCode.value  } })
      
    }
  } else if (a.code == 402) {
    router.push({ path: 'reportingResultwxts' })
  }
}
const numData = ref('')
const mobileNoShow = ref(false)
const maskName = (str: any) => {
  if (null != str && str != undefined) {
    let star = '' //存放名字中间的* //名字是两位的就取姓名首位+*
    if (str.length <= 2) {
      return '*' + str.substring(1, 2)
    } else {
      for (var i = 0; i < str.length - 7; i++) {
        star = star + '*'
      }
      return (
        str.substring(0, 3) +
        star +
        str.substring(str.length - 4, str.length)
      )
    }
  }
}
onMounted(() => {
  sessionStorage.clear()
  //从告知页进来的首先清一下customToken
  //如果告知信地址栏有sl，存起来，方便后退
  if (data.sl) {
    pStore.setLetterAdvceSL(data.sl)
  }
  //  从生成失败来一键重新检视
  if (data.isScsb) {
    noti(data)
  }
  if (data.taskCode && !data.isScsb) {
    //有taskCode是扫码长链
    //根据taskcode请求一飞的接口，返回taskstatus
    //根据taskstatus判断跳转哪个页面
    // 根据任务状态控制用户访问页面
    isTaskStatusGoView({ taskCode: (data as any).taskCode }).then((res: any) => {
      taskCode.value = data.taskCode
      switch (res.taskStatus) {
        case '1': // 已创建
          noti(data)
          break;
        case '2': // 已查看告知页
          noti(data)
          break;
        case '3': // 已授权认证
          noti(data)
          break;
        case '4': // 已确认保单范围
          noti(data)
          break;
        case '5': // 生成中
          router.push({ path: '/reportingResultscz', query: { taskCode: res.taskCode, reportCode: res.reportCode } })
          break;
        case '6':  // 已生成 
          noti(data)
          num.value = res.taskStatus
          break;
        case '10':  // 无有效保单
          noti(data)
          num.value = res.taskStatus
          reportCode.value = res.reportCode
          router.push({ path: '/reportingResultswyx', query: { taskCode: res.taskCode, reportCode: res.reportCode } })
          break;
        case '11': // 无可检视
          router.push({ path: '/reportingResultswkjs', query: { taskCode: res.taskCode, reportCode: res.reportCode } })
          break;
        case '12': // 生成失败
          noti(data)
          num.value = res.taskStatus
          reportCode.value = res.reportCode
          // router.push({ path: '/reportingResultcsb', query: { taskCode: res.taskCode, reportCode: res.reportCode, errCode: res.errCode } })
          break;
        case '14': // 报告结果不一致
          noti(data)
          num.value = res.taskStatus
          errCode.value =  res.errCode 
          reportCode.value = res.reportCode
          // router.push({ path: '/reportingResultsbyz', query: { taskCode: res.taskCode, reportCode: res.reportCode } })
          break;
        case '15': // 部分成功
          noti(data)
          num.value = res.taskStatus
          // router.push({ path: '/reportingResultlecs', query: { taskCode: res.taskCode, reportCode: res.reportCode } })
          break;
        case '16':
          noti(data)
          errCode.value =  res.errCode 
          num.value = res.taskStatus
          reportCode.value = res.reportCode
          router.push({ path: '/reportingResultcsb03', query: { taskCode: res.taskCode, reportCode: res.reportCode, errCode: res.errCode } })
          break;
        case '17': // 报告超时
          router.push({ path: '/reportingResultlecs', query: { taskCode: res.taskCode, reportCode: res.reportCode, messagePrompt:res?.messagePrompt, showButton:res.showButton } })
          break;
        case '18': // 已保存
          noti(data)
          num.value = res.taskStatus
          // router.push({ path: '/reportingResultybc', query: { taskCode: res.taskCode, reportCode: res.reportCode } })
          break;
      }
    })
  } else if (!data.isScsb) {   //一键重新检视生成不走这里
    //复制短链接
    getUrlParam(data).then((res: any) => {
      if (res.code == 200) {
        taskCode.value = res.param
        sessionStorage.setItem('invitedFlag', res.invitedFlag)
        //根据taskcode请求一飞的接口，返回taskstatus
        //根据taskstatus判断跳转哪个页面
        // 根据任务状态控制用户访问页面
        isTaskStatusGoView({ taskCode: res.param }).then((v: any) => {
          switch (v.taskStatus) {
            case '1':
              noti(res)
              break;
            case '2':
              noti(res)
              break;
            case '3':
              noti(res)
              break;
            case '4':
              noti(res)
              break;
            case '5': // 生成中
              router.push({ path: '/reportingResultscz', query: { taskCode: res.param } })
              break;
            case '6':  // 已生成
              noti(res)
              num.value = v.taskStatus
              break;
            case '10':  // 无有效保单
              noti(res)
              num.value = v.taskStatus
              reportCode.value = v.reportCode
              router.push({ path: '/reportingResultswyx', query: { taskCode: res.param } })
              break;
            case '11': // 无可检视
              router.push({ path: '/reportingResultswkjs', query: { taskCode: res.param } })
              break;
            case '12': // 生成失败
            noti(res)
              num.value = v.taskStatus
              reportCode.value = v.reportCode
              // router.push({ path: '/reportingResultcsb', query: { taskCode: res.param, errCode: v.errCode } })
              break;
            case '14': // 报告结果不一致
              noti(res)
              num.value = v.taskStatus
              errCode.value =  v.errCode 
              reportCode.value = v.reportCode
              // router.push({ path: '/reportingResultsbyz', query: { taskCode: res.param } })
              break;
            case '15': // 部分成功
              noti(res)
              num.value = v.taskStatus
              // router.push({ path: '/reportingResultlecs', query: { taskCode: res.taskCode, reportCode: res.reportCode } })
              break;
            case '16':
              noti(res)
              num.value = v.taskStatus
              errCode.value =  v.errCode 
              reportCode.value = v.reportCode
              router.push({ path: '/reportingResultcsb03', query: { taskCode: v.taskCode, reportCode: v.reportCode, errCode: v.errCode } })
              break;
            case '17': // 报告超时
              router.push({ path: '/reportingResultlecs', query: { taskCode: v.taskCode, reportCode: v.reportCode,messagePrompt:v?.messagePrompt, showButton:v.showButton } })
              break;
            case '18': // 已保存
              noti(res)
              num.value = v.taskStatus
              // router.push({ path: '/reportingResultybc', query: { taskCode: v.taskCode, reportCode: v.reportCode } })
              break;
          }
        })
      } else {
        router.push({ path: '/reportingResultlecs' })
      }
    })
  }
  // setTimeout(()=>{
  //   const taskNo:any =  data.taskCode 
  //   RInform(taskNo).then((res: any) => {
  //     if(res.code == 200){
  //       if(res.data.mobileNo) {
  //         formList.mobile1 = res.data.mobileNo
  //         formList.mobile = maskName(res.data.mobileNo)
  //         mobileNoShow.value = false
  //       } else {
  //         mobileNoShow.value = true
  //       }
  //     }
  //   })
  //   getUrlExpire({taskCode:data.taskCode}).then((res: any) => {
  //     if(res.code == 200){
  //       numData.value = res.data
  //     }
  //   })
  // },1900)
});

let noti = (x: any) => {
  data.taskCode = x.param ? x.param : x.taskCode
  notificationLetteradssa({ taskCode: x.param || x.taskCode }).then((v: any) => {
    if (v.code == 200) {
      status = v.status
      jstUrl = v.jstUrl
      getHtml(v.context)
      if (v.status == 0) {
        t.value = '邀请信'
      } else {
        t.value = '温馨提示'
      }
    }
  })
  const taskNo: any = data.taskCode
  RInform(taskNo).then((res: any) => {
    if (res.code == 200) {
      if (res.data.mobileNo) {
        formList.mobile1 = res.data.mobileNo
        formList.mobile = maskName(res.data.mobileNo)
        mobileNoShow.value = false
      } else {
        mobileNoShow.value = true
      }
    }
  })
  getUrlExpire({ taskCode: data.taskCode }).then((res: any) => {
    if (res.code == 200) {
      numData.value = res.data
    }
  })
}
</script>

<!-- less嵌套设置 -->
<style lang="less" scoped>
input[disabled],
input:disabled,
input.disabled {
  color: #bbb;
  opacity: 1;
  -webkit-text-fill-color: #bbb;
  -webkit-opacity: 1;
}

[readonly="readonly"] {
  pointer-events: none;
}

.photo {
  margin-top: 10px;

  .photoDv {
    border-radius: 4px;
    height: 43px;
    display: flex;
    font-size: 13px;
    padding: 7px;
    color: #525252;
    align-items: center;
    background: #F6F9FD;
    justify-content: space-between;

    input {
      width: 100px;
      color: #000;
      margin-left: 23px;
      text-align: right;
      background: transparent;
    }

    .photoDvCode {
      display: flex;
      justify-content: space-between;
    }
  }

  .photoDv1 {
    border-radius: 4px;
    height: 43px;
    display: flex;
    margin-top: 17px;
    color: #525252;
    align-items: center;
    background: #F6F9FD;
    justify-content: space-between;

    div:last-child {
      width: 92px;
      height: 43px;
      display: flex;
      font-size: 12px;
      color: #198AFA;
      border-radius: 3px;
      align-items: center;
      // letter-spacing: 1px;
      justify-content: center;
    }

    .photoDvCode {
      width: calc(100% - 92px);
      height: 43px;
      display: flex;
      padding: 0 10px;
      font-size: 13px;
      align-items: center;
      justify-content: space-between;

      div {
        width: 50px;
      }

      input {
        width: calc(100% - 30px);
        // margin-left: 10px;
        // text-align: right;
        background: transparent;
      }
    }
  }
}
.pageBj {
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 1000;
  position: absolute;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);

  .pageBjDiv {
    width: 300px;
    // padding: 10px 20px;
    border-radius: 10px;
    background: #ffffff;

    .pageBjDivHeader {
      margin-top: 17px;
      font-size: 14px;
      font-weight: bold;
    }

    .pageBjDivsection {
      margin-top: 17px;
      font-size: 13px;
    }

    .pageBjDivBtoom {
      display: flex;
      width: 100%;
      margin-top: 17px;
      justify-content: center;
      border-top: 1px solid #f3f3f3;

      div {
        padding: 10px 0;
        width: 50%;
      }

      div:last-child {
        color: #ffffff;
        background: #2c56ce;
        border-bottom-right-radius: 7px;
      }
    }
  }
}

.pageletterAdvce {
  overflow: hidden;
  min-height: 100vh;
  overflow-y: auto;
  background: url(/src/assets/img/features/invitationBgnoT.png);
  background-color: #0B1E5D;
  background-repeat: no-repeat;
  background-size: 100% auto;

  .navBar {
    height: 53px;

    // background-color: #C1CCE6;
    :deep(.van-icon) {
      color: #fff;
    }
  }

  .content {
    z-index: 12;
    width: 100%;
    height: calc(100vh - 58px);
    overflow: hidden;
    overflow-y: auto;
    padding-top: 68px;
    padding-bottom: 68px;
    box-sizing: border-box;

    .letterAdviceText {
      width: 44vw;
      height: 13.75vw;
      margin: 0 auto;
      margin-top: -40px;
      background: url(/src/assets/img/features/invitationtext.png);
      background-size: 100% 100%;
    }

    .letterAdviceTipsText {
      width: 44vw;
      height: 13.75vw;
      margin: 0 auto;
      margin-top: -40px;
      background: url(/src/assets/img/features/invitationTipstext.png);
      background-size: 100% 100%;
    }

    .english {
      z-index: 14;
      width: 90vw;
      height: 20vw;
      margin: 0 auto;
      background: url(/src/assets/img/features/invitationEng.png);
      background-size: 100% 100%;
    }

    .tipsenglish {
      z-index: 14;
      width: 90vw;
      height: 20vw;
      margin: 0 auto;
      background: url(/src/assets/img/features/tipsEng.png);
      background-size: 100% 100%;
    }

    .containder {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      position: relative;
      width: 100vw;
      height: auto;
      margin-top: -10vw;
    }

    .envelope {
      width: 96vw;
      height: 80vw;
      position: absolute;
      z-index: 100;
      background: url(/src/assets/img/features/invitationenvB2.png);
      background-size: 100% 100%;
    }

    @media (min-width: 500px) {
      .envelope {
        height: 70vw;
      }
    }

    @media (min-width: 600px) {
      .envelope {
        height: 60vw;
      }
    }

    .textViewExperience {
      width: 80vw;
      height: auto;
      min-height: 480px;
      z-index: 200;
      margin-bottom: 18vw;
      padding: 19px 19px 19px 19px;
      background: url(/src/assets/img/features/invitationTextBg.png);
      background-size: 100% 100%;
      text-align: left;
      overflow: auto;

      .sect {
        overflow-y: auto;
        font-size: 14px;

        .textOneExperience:first-child {
          font-weight: 600;
          color: #533019;
        }

        .textOneExperience:nth-child(2) {
          text-indent: 2em;
          font-weight: 500;
          color: #573015 100%;
        }

        .textOneExperience:nth-child(3) {
          color: #CE4000;
          font-weight: 500;
          text-align: center
        }

        .textOneExperience:nth-child(4) {
          color: #CE4000;
          font-weight: 500;
          text-align: center
        }

        .textOneExperience:nth-child(5) {
          color: #CE4000;
          font-weight: 500;
          text-align: center
        }

        .textOneExperience:nth-child(6) {
          color: #CE4000;
          font-weight: 500;
          text-align: center
        }

        .textOneExperience:nth-child(7) {
          margin-top: 18px;
          text-indent: 2em;
          font-weight: 500;
          color: #573015 100%;
        }

        .textOneExperience {
          width: 97%;
          margin-top: 7px;
          color: #222222;
          font-weight: 300;
        }
      }

      .sectTips {
        overflow-y: auto;

        .textOneExperience:first-child {
          font-size: 14px;
          font-weight: 600;
          color: #533019;
          line-height: 23px;
        }

        .textOneExperience:nth-child(2) {
          font-size: 14px;
          font-weight: bold;
          color: rgba(87, 48, 21, 1);
        }

        .textOneExperience:nth-child(3) {
          font-size: 14px;
          // color: #CE4000;
          color: rgba(87, 48, 21, 1);
          font-weight: 600;
          // text-align: center
        }

        .textOneExperience:nth-child(4) {
          font-size: 14px;
          // color: #CE4000;
          color: rgba(87, 48, 21, 1);
          font-weight: 600;
          // text-align: center
        }

        .textOneExperience:nth-child(5) {
          font-size: 14px;
          // color: #CE4000;
          color: rgba(87, 48, 21, 1);
          font-weight: 600;
          margin-top: 12px;
          // text-align: center
        }

        .textOneExperience:nth-child(6) {
          font-size: 14px;
          color: #CE4000;
          font-weight: 500;
          text-align: center
        }

        .textOneExperience:nth-child(7) {
          margin-top: 18px;
          font-size: 14px;
          text-indent: 2em;
          font-weight: 500;
          color: #573015 100%;
        }

        .textOneExperience {
          width: 97%;
          font-size: 15px;
          margin-top: 7px;
          color: #222222;
          font-weight: 300;
        }
      }
    }

    @media (min-width: 300px) {
      .textViewExperience {
        margin-bottom: 14vw;
      }
    }

    @media (min-width: 400px) {
      .textViewExperience {
        margin-bottom: 15vw;

      }
    }

    @media (min-width: 500px) {
      .textViewExperience {
        margin-bottom: 18vw;
      }
    }

    @media (min-width: 600px) {
      .textViewExperience {
        margin-bottom: 20vw;
      }
    }
    @media (min-width: 700px) {
      .textViewExperience {
        margin-bottom: 21vw;
      }
    }

    .triangle {
      width: 98vw;
      height: 50vw;
      position: absolute;
      z-index: 300;
      background: url(/src/assets/img/features/invitationenvT2.png);
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      padding-bottom: 8vw;

      .small-div {
        width: 42vw;
        height: 13vw;
        margin: 0 2%;
        font-size: 18px;
        color: rgba(103, 62, 34, 1);
        line-height: 13vw;
        text-align: center;
      }

      .container>.small-div:last-child {
        margin-right: 0;
      }

      .experienceButExperience {
        background: url(/src/assets/img/features/invitationenvBtn.png);
        background-size: 100% 100%;
      }

      .experienceButExperiencee {
        margin-bottom: 5vw;
        color: #ffffff;
        background: url(/src/assets/img/features/invitationenvBtn.png);
        background-size: 100% 100%;
      }

      .experienceButExperienOut{
        width: 38vw;
        padding: 1.7vw 0.5vw 1.7vw 0.5vw;
        .experienceButExperiencez {
          width: 100%;
          height:8.4vw;
          line-height: 8.4vw;
          margin-bottom: 2.5vw;
          color: #ffffff;
          border: 1px solid #ccc;
          border-radius: 6vw;
        }
      }
    }

    .stage {
      width: 98vw;
      height: 25vw;
      background: url(/src/assets/img/features/invitationenvB3.png);
      background-size: 100% 100%;
      margin: 0 auto;
      margin-top: -6vw;
    }

    .experienceButExperienceSpan {
      font-size: 14px;
      text-align: center;
      margin-top: 19px;
      color: rgba(255, 55, 52, 1);
      font-weight: 600;
    }
  }
}
</style>


<!-- 
    1.有从业人员信息的---告知信
    客户姓名	仅展示	文本
    保险机构	仅展示	文本
    从业人员姓名	仅展示	文本
    其他文案		
    立即体验		按钮

    2.无从业人员信息---告知信
    客户姓名	仅展示	文本
    保险机构	仅展示	文本
    立即体验		按钮

    3.告知信（查看报告）
    报告名称	仅展示	文本			
    报告生成时间	仅展示	文本			
    保险机构	仅展示	文本			
    代理人	仅展示	文本			即从业人员姓名
    立即开启		按钮			


 -->
